/*
 * @Author: hongbin
 * @Date: 2021-11-13 10:55:27
 * @LastEditors: hongbin
 * @LastEditTime: 2021-11-13 12:10:46
 * @Description:collections 标签栏
 */
import { Close } from "@mui/icons-material";
import { FC, ReactElement } from "react";
import styled, { css } from "styled-components";
import { flexCenter, hideScrollBar } from "../styled";

interface IProps {
  tags: string[];
  active: string;
  onChangeTag: (collection: string) => void;
  onCloseTag: (collection: string) => void;
}

const Tags: FC<IProps> = ({
  tags,
  active,
  onChangeTag,
  onCloseTag,
}): ReactElement => {
  return (
    <Wrap>
      {tags.map(tag => (
        <Item
          onClick={() => onChangeTag(tag)}
          active={tag === active}
          key={tag}
        >
          {tag}
          <Close onClick={() => onCloseTag(tag)} fontSize="small" />
        </Item>
      ))}
    </Wrap>
  );
};

export default Tags;

const Item = styled.div<{ active: boolean }>`
  padding: 0 1rem;
  min-width: 10rem;
  ${flexCenter};
  justify-content: space-between;
  transition: background var(--transition-duration) linear;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  cursor: pointer;
  user-select: none;

  & > svg {
    transition: inherit;
    transition-property: background, transform;
    border-radius: 100%;
    :hover {
      transform: rotate(90deg);
      background: #eeeeee4e;
    }
  }

  :hover {
    background-color: #51f;
    color: #fff;
  }

  ${({ active }) =>
    active &&
    css`
      color: #fff;
      background: #ccc;
    `};
`;

const Wrap = styled.div`
  display: flex;
  overflow: scroll hidden;
  height: 2rem;
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid #51f;
  padding: 0 0.5rem;
  ${hideScrollBar};
`;
